<template>
	<div class="resourceAudit">
		<div class="classIndex_h">
			<span>资源审核</span>
		</div>
		<!--  -->
		<div class="classNotice_search clear">
			<el-input class="classNotice_sc fl" placeholder="资源名称" prefix-icon="el-icon-search" v-model="keyword" @change="searchLiveList">
			</el-input>
		</div>
		<div class="resourceAudit" v-loading="loading" >
			<template v-if="resourceLis.length !== 0">
				<el-table border :data="resourceLis">
					<el-table-column prop="name" label="资源标题" width="150" align='left' show-overflow-tooltip>
						<template slot-scope="scope">
							{{scope.row.name}}.{{scope.row.postfix}}
						</template>
					</el-table-column>
					<el-table-column align='center' prop="category" label="组织架构" width="109" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="u_name" align='center' label="用户名" width="80" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="create_time" align='center' label="日期" width="100" show-overflow-tooltip>
					</el-table-column>
					<el-table-column prop="status" align='center' label="状态" width="50" show-overflow-tooltip>
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" content="已通过" placement="top" v-if="scope.row.status == 1">
								<span class="el-icon-circle-check"></span>
							</el-tooltip>
							<el-tooltip class="item" effect="dark" content="未审核" placement="top" v-if="scope.row.status == 2">
								<span class="el-icon-warning"></span>
							</el-tooltip>
							<el-tooltip class="item" effect="dark" content="已拒绝" placement="top" v-if="scope.row.status == 3">
								<span class="el-icon-circle-close"></span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="操作" align='center' width="209">
						<template slot-scope="scope">
							<el-button :disabled="setDisabled(scope.row)" @click="viewResource(scope.row)" type="text">预览</el-button>
							<el-button @click="approval(scope.row.id)" type="text" size="small" v-if="scope.row.status == 2 ">批准</el-button>
							<el-button type="text" size="small" v-if="scope.row.status == 2 " @click="refusal(scope.row.id)">拒绝</el-button>
							<!-- <el-button  type="text" size="small" 
					     	v-if="scope.row.status == 3 "
					     	@click="reasonView(scope.row.comment)">理由</el-button> -->
							<a :href="downloadFiler(scope.row.id)" v-if="scope.row.is_download != 0">下载</a>
							<el-button type="text" size="small" class="delete-btn" @click="removeList(scope.row.id)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
			<div class="pageBox" v-if="total_number > page_size">
				<el-pagination @current-change="change_page" :current-page="page_index" :page-size="page_size" layout="prev, pager, next" :total="total_number">
				</el-pagination>
			</div>
		</div>
		<div class="dependent" v-if="placeholder">
			<i class="ipm image_nofound"></i>
			<p>
				还没发现任何相关的内容哦~
			</p>
		</div>
		<!-- 理由 -->
		<!-- <el-dialog
			title="理由"
			:visible.sync="reasonCause"
			width="520px"
			custom-class="reasonCause"
			:close-on-click-modal="false">
			<div class="Approval_TXT">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label-width="0" prop="desc">
						<el-input type="textarea" 
						:rows="6" 
						maxlength="200"
						placeholder="请填写拒绝理由, 不超200个字符"
						v-model="ruleForm.desc"></el-input>
					</el-form-item>
					<el-form-item class="buttonCSS" label-width="0">
						<el-button @click="resetForm('ruleForm')" type="primary" plain>取消</el-button>
						<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-dialog> -->
		<!--  -->
		<!--视频预览  -->
		<el-dialog title="视频预览" :visible.sync="isShow" width="800px" custom-class="imgPreview" :before-close="viewClose" :close-on-click-modal="false">
			<nativeVideo v-if="showVideoPlayer" :playParam.sync="playParam" ref="video"></nativeVideo>
		</el-dialog>
		<!--  -->
		<!-- 预览图片 -->
		<image-viewer v-if="imagePreview.showViewer" :on-close="closeViewer" :url-list="imagePreview.previewSrcList">
		</image-viewer>
		<!-- 预览文档 -->
		<el-dialog title="预览文档" :visible.sync="PreviewFilerView" width="1000px" custom-class="FilerViews" :close-on-click-modal="false">
			<div class="masking_c" style="height: 600px;">
				<iframe :src="pdfPath" frameborder="0" style="width: 100%; height: 100%;"></iframe>
				<div v-if="0">
					<div class="pdfView">
						<div v-if="viwPdfParam.loadedRatio > 0 && viwPdfParam.loadedRatio < 1" style="background-color: green; color: white; text-align: center" :style="{ width: viwPdfParam.loadedRatio * 100 + '%' }">{{ Math.floor(viwPdfParam.loadedRatio * 100) }}%</div>
						<pdf ref="pdf" style="width: 100%" :src="viwPdfParam.src" :page="viwPdfParam.page" @progress="viwPdfParam.loadedRatio = $event" @error="error" @num-pages="viwPdfParam.numPages = $event" @link-clicked="viwPdfParam.page = $event">
						</pdf>
					</div>
					<el-pagination @current-change="pdfPageChange" :current-page="viwPdfParam.page" :page-size="1" layout="total,  prev, pager, next, jumper" :total="viwPdfParam.numPages">
					</el-pagination>
				</div>
			</div>
		</el-dialog>
	</div>
</template>
<style scoped>
.el-dialog__wrapper {
	text-align: center;
}
</style>
<script>
// import pdf from 'vue-pdf'
import nativeVideo from '../base/nativeVideo.vue'

export default {
	components: {  nativeVideo },
	name: '',
	data() {
		return {
			imagePreview: { /*图片预览*/
				showViewer: false,
				previewSrcList: []
			},
			page_index: 1,
			page_size: this.$g.page_size,
			total_number: 0,
			resourceLis: [],
			/*列表数据*/
			keyword: '',
			/*关键字搜索*/
			class_id: '',
			/**/
			reasonCause: false, //理由--原因
			ruleForm: { desc: '' },
			rules: {
				desc: [
					{ required: true, message: '请填写拒绝理由', trigger: 'blur' },
				]
			},
			showVideoPlayer: false,
			playParam: { play_url: '' },
			isShow: false, //视频预览
			videoOptions: {
				loop: false,
				height: '360',
				sources: [{
					type: "video/mp4",
					src: "00"
				}],
				autoplay: true,
				controls: true,
				language: 'zh-CN',
				poster: "",
				controlBar: {
					timeDivider: true,
					durationDisplay: true,
					remainingTimeDisplay: false,
					fullscreenToggle: true //全屏按钮
				},
			},

			preview: '',

			PreviewFilerView: false,
			filerSrc: '',
			loadedRatio: 0,
			page: 1,
			numPages: 0,
			placeholder: false,
			loading: true,
			play_url: '',

			isActive: true,
			isPDFActive: true,
			viwPdfParam: {
				src: '',
				loadedRatio: 0,
				page: 1,
				numPages: 0,
				rotate: 0,
			},

			res_id: '',
			classFlas: true,
			pdfPath: '',
		}
	},
	created() {
		this.getClass()
	},
	methods: {
		/**
		 * 根据资源进行预览
		 * @DateTime 2020-05-09T10:19:49+0800
		 * @qiu_m
		 * @param    {[type]}                 obj [description]
		 */
		setDisabled(obj) {
			if ((obj.file_type == 6 && (obj.postfix == 'mp4' || obj.postfix == 'mov')) || obj.file_type == 3 || obj.file_type == 1) {
				return false
			} else {
				return true
			}
		},
		//资源预览转发
		viewResource(obj) {

			//视频预览
			if (parseInt(obj.file_type) === 6) {
				this.isShow = true;
				this.videoView(obj);
			}
			//图片预览
			else if (parseInt(obj.file_type) === 3) {
				this.imagePreview.showViewer = true;
			}
			//文档预览
			else if (parseInt(obj.file_type) === 1) {
				this.PreviewFilerView = true
			}
			//音频预览
			/*else if( parseInt( obj.file_type ) === 5 ){
				// this.voiceVisible = true;
			}*/
			else {
				this.$message.warning("不支持预览的资源类型")
				return false;
			}
			let success = (data => {
				var result = data.data;
				//视频预览
				if (parseInt(result.file_type) === 6) {
					// this.$refs.videoPlayer.options.sources[0].src = ''

				}
				//图片预览
				else if (parseInt(result.file_type) === 3) {

					this.imgView(result.path);
				}
				//文档预览
				else if (parseInt(result.file_type) === 1) {
					this.pdfPath = result.path
					// this.pdfView( result.path);
				}
				//音频预览
				/*else if( parseInt( result.file_type ) === 5 ){
					this.voiceView(result.path)
					//this.$message.warning("不支持预览的资源类型")
				}*/
				else {
					this.$message.warning("不支持预览的资源类型")
				}
			})
			let fail = (data => {
				this.$message.error(data.msg)
			})
			this.$ajax.get('api/resource/view_info', { params: { id: obj.id, is_video: obj.is_video }, func: { success: success, fail: fail } })

		},
		voiceView(url) {
			this.voiceViewUrl = url;
			document.getElementById("voicepoauy").load();
		},
		/**
		 * 关闭图片
		 * @DateTime 2020-04-16T17:40:41+0800
		 * @qiu_m
		 * @return   {[type]}                 [description]
		 */
		closeViewer() {
			this.imagePreview.showViewer = false;
			this.imagePreview.previewSrcList = []
		},
		/*预览图片*/
		imgView(url) {
			this.imagePreview.previewSrcList.push(url);
		},
		//pdf预览
		pdfView(url) {
			this.viwPdfParam.src = pdf.createLoadingTask(url)
		},
		viewPDFClose() {
			this.isPDFActive = true
		},
		//关闭视频预览
		viewClose() {
			this.isShow = false
			this.showVideoPlayer = false;
		},
		//视频预览
		videoView(obj) {
			let url = this.BASE_URL + obj.path
			this.showVideoPlayer = true;
			this.playParam.play_url = url;
		},
		password(updatePassword, reason) {

			updatePassword(prompt('password is "test"'));
		},
		pdfPageChange(val) {
			this.page = val;
			this.viwPdfParam.page = val
		},
		error(err) {
			console.log(err);
		},
		//根据用户获取所在班级的id
		getClass() {

			let success = (res => {
				let data = res.data;
				this.class_id = data;

				if (data.length === 0) {
					return this.placeholder = true
				} else {
					this.getResourceList()
				}
			});

			this.$ajax({
				url: 'api/org/get_class_id_by_masterid',
				method: 'get',
				params: {
					user_id: this.$g.user_id,
				},
				func: { success: success }
			})
		},

		//数据列表
		getResourceList() {
			let success = (res => {
				let data = res.data;

				this.resourceLis = data.data;
				this.total_number = data.data_sum;
				this.page_index = parseInt(data.page_index);
				this.loading = false
				this.placeholder = this.resourceLis.length === 0 ? true : false;

			});
			this.$ajax({
				url: 'api/resource/resource',
				method: 'get',
				params: {
					userid: this.$g.user_id,
					class_id: this.class_id,
					page: this.page_index,
					size: this.page_size,
					name: this.keyword,
					data_type: 2
				},
				func: { success: success }
			})
		},
		//分页
		change_page(val) {
			this.page_index = val;
			this.getResourceList()
		},
		//搜索
		searchLiveList() {
			this.page_index = 1;
			this.getResourceList()
		},
		//拒绝理由
		reasonView(row) {

			this.$confirm(row, '理由', {
				type: 'info ',
				showCancelButton: false,
				showConfirmButton: false,
				customClass: 'confirm-them',
			}).then(() => {

			}).catch(() => {});
		},
		//删除
		removeList(id) {
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				customClass: 'confirm-them',
			}).then(() => {
				let success = (res => {
					this.$message.success(res.msg);
					this.getResourceList()
				});
				this.$ajax({
					url: 'api/resource/resource',
					method: 'delete',
					params: {
						id: id,
						del_type: 0
					},
					func: { success: success }
				})
			}).catch(() => {});
		},
		//拒绝
		refusal(id) {
			let success = (res => {
				this.$message.success(res.msg);
				this.getResourceList()
			})
			this.$ajax({
				url: 'api/resource/resource',
				method: 'put',
				data: {
					comment: "不需要理由",
					userid: this.$g.user_id,
					id: id,
					status: 3
				},
				func: { success: success }
			})
		},
		//拒绝
		// refusal(id){
		// 	this.reasonCause = true;
		// 	this.res_id = id
		// },
		// submitForm(formName) {
		// 	this.$refs[formName].validate((valid) => {
		// 		if (valid) {
		// 			let success  = (res =>{
		// 				this.$message.success(res.msg);
		// 				this.getResourceList()
		// 				this.reasonCause = false;
		// 				this.ruleForm.desc = '';
		// 			})
		// 			this.$ajax({
		// 				url: 'api/resource/resource',
		// 				method: 'put',
		// 				data: {
		// 					comment: this.ruleForm.desc,
		// 					userid: this.$g.user_id,
		// 					id: this.res_id,
		// 					status: 3
		// 				},
		// 				func: {success: success}
		// 			})
		// 		} else {
		// 			console.log('error submit!!');
		// 			return false;
		// 		}
		// 	});
		// },
		// resetForm(formName) {
		// 	this.$refs[formName].resetFields();
		// },
		//批准资源通过公开权限
		approval(id) {
			this.$confirm('您确定执行该操作吗？', '批准', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				customClass: 'confirm-them',
			}).then(() => {
				let success = (res => {
					this.$message.success(res.msg);
					this.getResourceList()
				});
				this.$ajax({
					url: 'api/resource/resource',
					method: 'put',
					data: {
						id: id,
						status: 1
					},
					func: { success: success }
				})
			}).catch(() => {});
		},
		//下载
		downloadFiler(id) {
			return this.BASE_URL + "/index/resource/resourcedownload?id=" + id
		},

	}
}
</script>